<template>
  <div class="chartLine_wrap">
    <div class="chartLine_wrap_tips" v-if="!id">请先选择设备</div>
    <div v-show="id" id="myChart" ref="echarts1" :style="{ width: '100%', height: '438px' }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getTemperatureApi } from "@/api/deviceApi.js";
require("echarts/theme/macarons");

import dayjs from "dayjs";

const TIME_FORMAT = "HH:mm:ss";

export default {
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      a: [],
      date: [],
    };
  },
  watch: {
    id: {
      handler: "handleGetPressureData",
      immediate: true,
    },
  },
  mounted() {
    this.handleGetPressureData();
  },
  methods: {
    async handleGetPressureData() {
      if (this.id) {
        const list = await getTemperatureApi(this.id);
        console.log(list, "温度信息");
        if (list && list.length) {
          this.date = list.map((item) => {
            const date = dayjs(item.timestamp);
            const formattedDate = date.format(TIME_FORMAT);
            return formattedDate;
          });
          this.a = list.map((item) => item.temperature);
          this.drawLine();
        }
      }
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.echarts1);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "温度监测",
          top: "30",
          left: "32",
          textStyle: {
            fontSize: 16, //字体大小
            color: "#333", //字体颜色
            fontWeight: "500",
          },
        },
        tooltip: {
          //触发类型：坐标轴触发
          trigger: "axis", //触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
          axisPointer: {
            type: "line", //默认为line，line直线，cross十字准星，shadow阴影
            lineStyle: {
              type: "dashed",
              color: "#808BA9",
            },
          },
          backgroundColor: "#fff", //也可以通过设置rgba调节背景颜色与透明度
          color: "#333",
          borderWidth: "1",
          borderColor: "#D9E1F8",
          textStyle: {
            color: "#333",
            fontSize: "12",
            lineHeight: "17",
          },
        },
        legend: {
          icon: "circle",
          itemHeight: 10, //修改icon图形大小
          textStyle: {
            fontSize: 14,
            color: "#333",
          },
          x: "left", //可设定图例在左、右、居中
          y: "top", //可设定图例在上、下、居中
          padding: [81, 0, 0, 32], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        },
        grid: {
          top: "145",
          left: "17",
          right: "17",
          bottom: "41",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.date,
          //使坐标轴刻度与标签对齐
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            // 改变x轴颜色
            lineStyle: {
              color: "#666",
              width: "1",
            },
          },
          axisLabel: {
            // 改变x轴字体颜色和大小
            formatter(val) {
              return "{a|" + `${val}` + "}";
            },
            rich: {
              a: {
                height: 40, // 设置字体行高
                color: "#666",
                fontSize: 14,
              },
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false, //y轴线消失
          },
          axisTick: {
            show: false, //y轴坐标点消失
          },
          boundaryGap: [0.1, 0], //有负数设置这个
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#D9E1F8",
            },
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: "#92A5E3",
            },
          },
        },
        series: [
          {
            name: "温度",
            type: "line", //bar:柱状 line:折线图
            data: this.a,
            color: "#00C5AB",
            // symbol: "circle", //折线点设置为实心点
            symbolSize: 8, //折线点的大小
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.chartLine_wrap {
  width: auto;
  height: 438px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chartLine_wrap_tips {
  width: 100%;
  text-align: center;
  color: #909399;
  font-size: 14px;
}
</style>
